import React from 'react';
import { Card } from 'antd';
import createG2 from 'g2-react';
import { Stat, Frame } from 'g2';
import PropTypes from 'prop-types';

const Chart = createG2((chart) => {
  chart.col('date', {
    type: 'time',
    mask: 'yyyy.mm',
    tickCount: 12,
  });
  chart.col('value', {
    alias: '',
  });
  chart.legend({
    position: 'bottom',
  });
  chart.axis('date', {
    line: null,
    tickLine: {
      stroke: '#000',
      value: 6, // 刻度线长度
    },
    title: null,
  });
  chart.axis('value', {
    tickLine: {
      stroke: '#000',
      value: 6, // 刻度线长度
    },
    labels: {
      label: {
        fill: '#000',
      },
    },
    line: {
      stroke: '#000',
    },
    grid: null,
  });
  chart.line().position('date*value').color('city', ['#1f77b4', '#ff7f0e', '#2ca02c']).shape('spline').size(2);
  chart.render();
});
class LineCardSearch extends React.Component {
  getInitialState() {
    return {
      data: [],
      forceFit: true,
      width: 500,
      height: 450,
      plotCfg: {
        margin: [20, 20, 60, 50],
      },
    };
  }
  componentWillReceiveProps({ data }) {
    const arr = [];
    const self = this;

    frame = Frame.combinColumns(frame, b, 'value', 'city', 'date');
  }

  render() {
    return (
      <div>
        <Chart
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          forceFit={this.state.forceFit}
        />
      </div>
    );
  }
}

export default LineCardSearch;

